
<template>
  <div class="loginContainer">
    <div class="box">
      <h3 class="btitle">欢迎登录</h3>
      <el-form  ref="updateFormRef" status-icon label-width="100px">
        <div class="bform">
          <el-form-item prop="username" label="用户：">
            <el-input
                type="text"
                v-model="account"
                autocomplete="off"
                placeholder="用户名/手机号/邮箱"
            />
          </el-form-item>
          <el-form-item prop="password"  label="密码：">
            <el-input
                type="password"
                v-model="password"
                autocomplete="on"
                placeholder="密码"
                @keyup.enter="handleupdate('updateFormRef')"
            />
          </el-form-item>
          <el-form-item prop="password" label="确认密码：" >
            <el-input
                type="password"
                v-model="confirmpassword"
                autocomplete="on"
                placeholder="确认密码"
                @keyup.enter="handleupdate('updateFormRef')"
            />
          </el-form-item>
          <el-form-item>
            <el-button
                color="#48D1CC"
                @click="updatepwd"
                round
                class="update"
            ><span style="color: white">确认修改</span></el-button
            >
            <span class="toRegister" @click="tologin">登录</span>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from '@/http'
import {ElMessage} from "element-plus";
import user from '@/http/user.js'
export default {
  data() {
    return {
      account: '',//账户
      password: '', //密码
      confirmpassword: "",
    }
  },
  methods:{
    tologin(){
      this.$router.push('/login')
    },
    updatepwd() {
      let updateForm = new FormData();
      updateForm.append("account",this.account)
      updateForm.append("password",this.password)
      updateForm.append("confirmpassword", this.confirmpassword)
      user.updatepwd(updateForm)  // 假设 user.updatepwd 已经处理了请求
          .then(resp => {
            if (resp.code === 20000) {
              ElMessage({
                type: 'success',
                message: '修改成功',
              })
              this.$router.push('/login');
            } else {
              ElMessage.error(resp)
              ElMessage({
                type: 'error',
                message: '用户不存在'
              })
            }
          })
          .catch(err => {
            console.log('修改密码异常:', err);
          })
    }
  }
}
</script>
<style lang="less" scoped>
.loginContainer {
  width: 45%;
  height: 70vh;
  position: relative;
  top: 45vh;
  left: 50%;
  transform: translate(-50%, -50%);
  border-left: 1px solid #e9ecef;
  border-top: 1px solid #e9ecef;
  border-radius: 20px;
  box-shadow: 6px 6px 6px #ced4da;
  background-color: #fff;
  text-align: center;

}
.box {
  width: 80%;
  height: 80%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);


}
.btitle {
  font-size: 2.5em;
  font-family: "楷体";
  font-weight: bold;
  color: #759aa0;
  color: #48d1cc;
}
.bform {
  width: 100%;
  height: 100%;
  padding: 20px 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-top: 30px;
}
.login{
  width: 80px;
}
.toRegister {
  font-size: 0.8em;
  margin-left: 85px;
  color: #999;
}

.el-button--goon {
  color: #fff;
  background-color: #48d1cc;
}
</style>
